<template>
  <div>
    <!-- 顶部导航 -->
    <div class="Comfirm_title">
      <van-nav-bar
        title="个人资料"
        left-text="返回"
        left-arrow
        @click-left="goFindAccountInfo"
      />
    </div>
    <!-- 背景组件 -->
    <Bg>
      <!-- 背景组件的插槽 -->
      <template>
        <!-- 个人资料的头像 -->
        <van-field readonly center label="头像">
          <!-- 组件自带的插槽 -->
          <template #button>
            <!-- 上传头像 -->
            <div class="background" :style="`background-image:url(${MyTitle})`">
              <van-uploader :after-read="onOversize" />
            </div>
          </template>
        </van-field>
        <!-- 个人资料的用户id -->
        <van-field
          readonly
          :v-model="MyId"
          label="用户名id"
          :placeholder="MyId"
          input-align="right"
        />
        <!-- 个人资料的用户昵称 -->
        <van-field
          v-model="Myname"
          label="昵称"
          placeholder="输入框内容右对齐"
          input-align="right"
          @blur="updateNickName"
        />
        <!-- 个人资料的用户个人简介 -->
        <van-field
          v-model="MyTag"
          label="简介"
          placeholder="这人很懒 , 什么也没有留下"
          input-align="right"
          @blur="updateDesc"
        />
      </template>
    </Bg>
  </div>
</template>

<script>
// 导入Bg背景组件
import Bg from "../components/Bg";
export default {
  name: "FindAccountInfo",
  data() {
    return {
      // 用户id
      MyId: "",
      // 用户昵称
      Myname: "",
      // 用户个性签名
      MyTag: "",
      // 我的头像
      MyTitle: "",
    };
  },
  components: {
    // 注册背景组件
    Bg,
  },
  created() {
    this.findAccountInfo();
  },
  methods: {
    // 回到我的页面
    goFindAccountInfo() {
      this.$router.go(-1);
    },
    // 上传头像
    onOversize(file) {
      // 获取token
      // let tokenString = this.$cookies.get("TOKEN");
       let tokenString =  localStorage.getItem("TOKEN");

      // 处理base64  为什么要处理
      let serverBase64Img = file.content.replace(
        /data:image\/jpeg;base64,/,
        ""
      );
      // 处理图片类型
      let imgType = file.file.type.split(/\//)[1];

      // 调用上传头像接口
      this.axios({
        method: "post",
        url: "/updateAvatar",
        data: {
          tokenString,
          serverBase64Img,
          imgType,
        },
      })
        .then((res) => {
          // 提示用户是否上传成功
          this.$toast(res.data.msg);
          // 判断是否上传成功
          if (res.data.code === "H001") {
            // 如果上传头像成功  再调用一下个人资料接口
             this.findAccountInfo()
          }
          // 
        })
        .catch((err) => {
          
        });
    },
    // 个人资料接口
    findAccountInfo() {
      //    个人资料接口
      //   请求地址：http://www.kangliuyong.com:10002/findAccountInfo
      //   请求类型： GET
      //   请求参数： {
      //     appkey: 你的appkey,
      //     tokenString: token字符串
      //   }
      // 获取token
      // let tokenString = this.$cookies.get("TOKEN");
       let tokenString =  localStorage.getItem("TOKEN");

      // 调用个人资料的接口
      this.axios({
        method: "get",
        url: "/findAccountInfo",
        params: {
          tokenString,
        },
      })
        .then((res) => {
          if (res.data.code === "B001") {
            this.MyId = res.data.result[0].userId;
            this.Myname = res.data.result[0].nickName;
            this.MyTag = res.data.result[0].desc;
            this.MyTitle = res.data.result[0].userImg;
            
            
            
          }
          
        })
        .catch((err) => {
          
        });
    },
    // 修改昵称
    updateNickName() {
      //  修改昵称接口
      // 请求地址：http://www.kangliuyong.com:10002/updateNickName
      // 请求类型： POST
      // 请求参数： {
      //   appkey: 你的appkey,
      //   tokenString: token字符串,
      //   nickName: 你的昵称
      // }

      // 获取token
      // let tokenString = this.$cookies.get("TOKEN");
       let tokenString =  localStorage.getItem("TOKEN");

      // 调用axios获取接口信息
      this.axios({
        method: "post",
        url: "/updateNickName",
        data: {
          tokenString,
          nickName: this.Myname,
        },
      })
        .then((res) => {
          this.$toast(res.data.msg);
          // 
        })
        .catch((err) => {
          // 
        });
    },
    // 修改简介
    updateDesc() {
      // 修改简介接口
      // 请求地址：http://www.kangliuyong.com:10002/updateDesc
      // 请求类型： POST
      // 请求参数： {
      //   appkey: 你的appkey,
      //   tokenString: token字符串,
      //   desc: 简介
      // }

      // 获取token
      // let tokenString = this.$cookies.get("TOKEN");
       let tokenString =  localStorage.getItem("TOKEN");

      // 调用axios获取接口地址
      this.axios({
        method: "post",
        url: "/updateDesc",
        data: {
          tokenString,
          desc: this.MyTag,
        },
      })
        .then((res) => {
          this.$toast(res.data.msg);
          
        })
        .catch((err) => {
          
        });
    },
  },
};
</script>

<style lang="less" scoped>
// 修改头像的组件
/deep/.van-uploader__upload {
  width: 50px;
  height: 50px;
  margin: 0;
  border-radius: 50px;
  background: transparent;
}
/deep/.van-cell {
  &:first-child {
    padding-top: 0px !important;
  }
}
/deep/ .van-uploader__upload-icon {
  color: transparent;
}
// 头像样式
.background {
  // background: red !important;
  background-size: cover;
  border-radius: 50px;
}
</style>